<template>
  <div>
    <div class="modal-body">
      <div class="modal-body-aside">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item>
            <a-button type="primary" ghost style="width: 200%" @click="handleAddConnect">
              <a-icon type="plus" /> 创建新连接
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="danger" ghost style="width: 200%" @click="handleDeleteConnect">
              <a-icon type="minus" /> 删除该连接
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div v-show="!ifCreatConnectFlag" class="modal-body-main">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item
            label="ProfileName"
          >
            <a-input v-model="list.connectName" placeholder="连接名称" />
          </a-form-item>
          <a-form-item
            label="Address"
          >
            <a-input v-model="list.address" placeholder="地址" />
          </a-form-item>
          <a-form-item
            label="Port"
          >
            <a-input v-model="list.port" placeholder="端口号" />
          </a-form-item>
          <a-form-item label="Username">
            <a-input
              v-model="list.userName"
              v-decorator="[
                'userName',
                { rules: [{ required: true, message: '请输入用户名' }] },
              ]"
              placeholder="用户名"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="Password">
            <a-input
              v-model="list.password"
              v-decorator="[
                'password',
                { rules: [{ required: true, message: '请输入密码' }] },
              ]"
              type="password"
              placeholder="密码"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
        </a-form>
      </div>
      <div v-show="ifCreatConnectFlag" class="modal-body-main">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :form="form">
          <a-form-item
            label="ProfileName"
          >
            <a-input v-model="addList.connectName" placeholder="连接名称" />
          </a-form-item>
          <a-form-item
            label="Address"
          >
            <a-input v-model="addList.address" placeholder="地址" />
          </a-form-item>
          <a-form-item
            label="Port"
          >
            <a-input v-model="addList.port" placeholder="端口号" />
          </a-form-item>
          <a-form-item label="Username">
            <a-input
              v-model="addList.userName"
              v-decorator="[
                'userName',
                { rules: [{ required: true, message: '请输入用户名' }] },
              ]"
              placeholder="用户名"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="Password">
            <a-input
              v-model="addList.password"
              v-decorator="[
                'password',
                { rules: [{ required: true, message: '请输入密码' }] },
              ]"
              type="password"
              placeholder="密码"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>

</template>

<script>
import {
  addConnectInfo,
  deleteConnectInfoByConnectKey,
  fetchConnectInfoByConnectKey,
  updateConnectInfoByConnectKey
} from '@/api/modal'

export default {
  name: 'Modal',
  props: {
    connectKey: {
      type: String,
      default: ''
    },
    ifSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: { // 原有列表信息
        connectName: 'eq', // 连接名
        address: 'wqe', // 地址
        port: 'qwe', // 端口号
        userName: 'weq', // 用户名
        password: 'weq' // 密码
      },
      addList: { // 新增列表信息
        connectName: '', // 连接名
        address: '', // 地址
        port: '', // 端口号
        userName: '', // 用户名
        password: '' // 密码
      },
      deleteList: { // 删除列表信息
        connectKey: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      temp: { //  查询列表
        connectKey: ''
      },
      newList: null, // 新增连接信息列表
      ifCreatConnectFlag: false, // 是否创建新连接
      form: this.$form.createForm(this, { name: 'add_form' }),
      ifFormFlag: false //  表单默认不通过
    }
  },
  watch: {
    ifSubmit() {
      if (this.ifCreatConnectFlag === true) {
        this.addConnect()
      } else {
        this.updateConnectInfo()
      }
    }
  },
  mounted() {
    this.ifCreatConnectFlag = false
    this.getConnectInfo()
  },
  methods: {
    //  通过connectKey得到连接信息
    getConnectInfo() {
      this.temp.connectKey = this.connectKey
      fetchConnectInfoByConnectKey(this.temp).then((res) => {
        this.list = res.data.connectInfo
      })
    },
    //  通过connectKey更新连接信息
    updateConnectInfo() {
      updateConnectInfoByConnectKey(this.list).then(() => {
        this.openNotification()
      })
    },
    //  提交后的提示框
    openNotification() {
      setTimeout(() => {
        this.$notification.success({
          message: '更新成功',
          description:
            '连接信息已经跟新了',
          onClick: () => {
            console.log('Notification 打开过了!')
          }
        })
      }, 2000)
    },
    // 点击创建新连接按钮方法
    handleAddConnect() {
      // this.list = null
      this.ifCreatConnectFlag = true
    },
    // 点击删除连接按钮方法
    handleDeleteConnect() {
      this.$confirm('此操作将删除该连接, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteConnectInfo()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增连接方法
    addConnect() {
      this.form.validateFields(err => {
        if (!err) {
          this.ifCreatConnectFlag = true
          this.$emit('childFn', this.ifFormFlag)
          addConnectInfo(this.addList).then(() => {
            setTimeout(() => {
              this.$notification.success({
                message: '新增成功',
                description:
                  '增加连接成功',
                onClick: () => {
                  console.log('Notification 增加打开过了!')
                }
              })
            }, 1500)
          })
        } else {
          this.ifCreatConnectFlag = false
          this.$emit('childFn', this.ifFormFlag)
        }
      })
    },
    // 通过connectKey删除连接方法
    deleteConnectInfo() {
      if (this.ifCreatConnectFlag === false) {
        this.deleteList.connectKey = this.connectKey
        deleteConnectInfoByConnectKey(this.deleteList).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.handleAddConnect()
        })
      } else {
        this.$message({
          type: 'error',
          message: '无连接选定'
        })
      }
    }
  }
}
</script>

<style scoped>
/*设置链接弹出框*/
.modal-body {
  display: flex;
}
/*设置链接弹出框左侧*/
.modal-body-aside {
  border-radius: 0.3em;
  flex: 1;
  border: 0.3em solid rgba(231, 218, 218, 0.2);
  background-color: rgba(219, 226, 238, 0.99);
}
/*设置链接弹出框右侧*/
.modal-body-main {
  flex: 3;
  border-radius: 0.3em;
  margin-left: 0.5em;
  border: 0.5em solid rgba(231, 218, 218, 0.2);
}

</style>
